<script setup>
import {defineModel} from "@vue/runtime-core";
import {listSaleOrders,addPlan,getPlan,updatePlan} from "@/api/production/plan.js";
import {listUser} from "@/api/system/user.js";
import {ElMessage} from "element-plus";

const emit = defineEmits(['getList'])
const open = defineModel('open');
const loading = ref(true);
const title = defineModel('title');
let ins = defineModel('ins')
const id = defineModel('id');
let form = reactive({
  id: 0,
  saleId: 0,
  planNo:'',
  planName:'',
  planDescribe:'',
  userId:0,
  planStartTime:'',
  planEndTime:'',
  productionPlanDetails:[],
  rules:{
    saleId:[
      {required:true,message:'销售订单不能为空',trigger:'blur'}
    ],
    planName:[
      {required:true,message:'计划名称不能为空',trigger:'blur'}
    ],
    planDescribe:[
      {required:true,message:'计划描述不能为空',trigger:'blur'}
    ],
    userId:[
      {required:true,message:'负责人不能为空',trigger:'blur'}
    ],
    planStartTime:[
      {required:true,message:'计划开始时间不能为空',trigger:'blur'}
    ],
    planEndTime:[
      {required:true,message:'计划结束时间不能为空',trigger:'blur'}
    ]
  }
})
let saleOrders = reactive([])
let saleOrder = reactive({})
let userList = reactive([])
function makePlanName(){
  if (form.planStartTime!==''){
    form.planName = form.planStartTime.substring(0,4)+'年'+form.planStartTime.substring(5,7)+'月'+
        saleOrder.orderNo+'生产计划'
    form.planNo="SCJH"+new Date().getTime();
  }
}
function saleChange(){
  saleOrders.forEach(item=>{
    if (item.id===form.saleId){
      saleOrder.id = item.id
      saleOrder.orderNo = item.orderNo
      saleOrder.productList =item.productionPlanDetails
    }
  })
}
function reset(){
  form.id=null
  form.saleId= null
  form.planNo=null
  form.planName=null
  form.planDescribe=null
  form.userId=null
  form.planStartTime=null
  form.planEndTime=null
  form.productionPlanDetails=[]
  saleOrder.saleId=null
  saleOrder.orderNo=null
  saleOrder.number=null
  saleOrder.planStartTime=null
  saleOrder.planEndTime=null
  saleOrder.productList=[]
}
function cancel(){
  reset();
  open.value = false
}
function submitForm(){
  form.id = id.value;
  form.productionPlanDetails=saleOrder.productList
  if (title.value==='添加生产计划'){
    addPlan(form).then(response=>{
      if (response.msg==='操作成功'){
        ElMessage.success('操作成功')
        cancel()
        emit('getList')
      }else {
        ElMessage.error('操作失败')
      }
    })
  }else if (title.value==='修改生产计划'){
    updatePlan(form).then(response=>{
      if (response.msg==='操作成功'){
        ElMessage.success('操作成功')
        cancel()
        emit('getList')
      }else {
        ElMessage.error('操作失败')
      }
    })
  }

}
//获取用户
function getUsers(){
  listUser().then(response => {
    userList = response.rows
    console.log(response)
  });
}
function getPlan1(){
  if (id.value!=0){
    getPlan(id.value).then(response => {
      form.saleId = response.data.saleId;
      form.planNo = response.data.planNo;
      form.planName = response.data.planName;
      form.planDescribe = response.data.planDescribe;
      form.userId = response.data.userId;
      form.planStartTime = response.data.planStartTime;
      form.planEndTime = response.data.planEndTime;
      saleOrder.productList = response.data.productionPlanDetails;
    });
  }
}
function getForm(){
  reset();
  loading.value = true
  getUsers()
  listSaleOrders().then(response => {
    saleOrders=response.rows
  });
  loading.value = false
}
getForm()
watch(ins,(old,newV)=>{
  if (ins){
    getPlan1()
  }
})
</script>

<template>
  <!-- 添加或修改生产计划对话框 -->
  <el-dialog v-loading="loading" :title="title" width="600px" @close="reset()">
    <el-form :disabled="title=='查看计划详情'?true:false" ref="planRef" :model="form" style="flex: initial" :rules="form.rules">
      <el-form-item label="销售订单" prop="saleId">
        <el-select v-model="form.saleId" placeholder="请选择销售订单" @change="saleChange()" :disabled="title=='添加生产计划'?false:true">
          <el-option v-for="item in saleOrders" :key="item.id" :label="item.orderNo" :value="item.id" :disabled="item.planStatus != null" />
        </el-select>
      </el-form-item>
      <el-form-item label="产品" prop="productionPlanDetails" >
        <el-row v-for="item in saleOrder.productList" :key="item.productionId">
          <el-col :span="8" class="col">
            <el-input disabled v-model="item.productionName" placeholder="产品" />
          </el-col>
          <el-col :span="8" class="col">
            <el-input v-model="item.productionNumber" placeholder="产品数量" />
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="项目预期开始时间" prop="planStartTime" >
        <el-date-picker clearable
                        v-model="form.planStartTime"
                        type="date"
                        @change="makePlanName"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择项目预期开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="项目预期结束时间" prop="planEndTime">
        <el-date-picker clearable
                        v-model="form.planEndTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="请选择项目预期结束时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="计划名称" prop="planName">
        <el-input disabled v-model="form.planName" placeholder="计划名称自动生成" />
      </el-form-item>
      <el-form-item label="计划描述" prop="planDescribe">
        <el-input v-model="form.planDescribe" placeholder="请输入计划描述" />
      </el-form-item>
      <el-form-item label="计划负责人" prop="userId">
        <el-select v-model="form.userId" placeholder="请选择计划负责人" >
          <el-option v-for="item in userList" :key="item.userId" :label="item.userName" :value="item.userId" />
        </el-select>
      </el-form-item>
      <el-form-item label="计划编号" prop="planNo">
        <el-input disabled v-model="form.planNo" placeholder="计划编号自动生成" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm"  :disabled="title=='查看计划详情'?true:false">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
 .col{
   margin-left: 30px;
   margin-bottom: 10px;
   text-align: center;
 }
</style>